<!-- createBy timi -->
<template>
  <div style="background-color: white;">
    <div style="width: 100%;height: 100px;">
      <a-row style="padding: 20px 0px 0px 20px ; height: 150px" :gutter="[16, 8]">
        <a-col :span="3">
          <j-dict-select-tag
            style="width: 100%"
            v-model="queryParam.company"
            placeholder="选择组织"
            dictCode="crm_company,name,id"
            @change="changeQuery"
          />
        </a-col>
        <a-col :span="3">
          <j-dict-select-tag
            style="width: 100%"
            v-model="queryParam.workshop"
            placeholder="请选择车间"
            dictCode="workshop"
            @change="changeQuery"
          />
        </a-col>
        <a-col :span="3">
          <j-dict-select-tag
            style="width: 100%"
            v-model="queryParam.workingProcedure"
            placeholder="请选择工序"
            dictCode="working_procedure"
            @change="changeQuery"
          />
        </a-col>
        <!-- <a-col :span="3">
          <a-select style="width: 100%" :options="queryOptions" v-model="querysTitle" placeholder="请选择请求参数" />
        </a-col> -->
        <a-col :span="4">
          <a-select
            style="width: 100%; white-space: nowrap;"
            :options="queryOptions"
            v-model="querys"
            mode="multiple"
            placeholder="请选择参数"
          />
        </a-col>
        <a-col v-if="deviceSelectType" :span="7">
          <j-multi-select-tag
            style="width: 80%"
            placeholder="请选择机台"
            v-model="deviceNoSingle"
            mode="multiple"
            :options="deviceOptions"
          />
          <a-button type="link" @click="changeSelect">选择机台</a-button>
        </a-col>
        <a-col v-if="!deviceSelectType" :span="7">
          <template v-for="(item, index) in deviceSelectRangeArr">
            <a-input-number v-model="item.deviceNo1" placeholder="请输入" :min="0" style="width: 50px" />~
            <a-input-number v-model="item.deviceNo2" placeholder="请输入" :min="item.deviceNo1" style="width: 50px" />
            <a-button style="color: red; padding: 0px" type="link" icon="delete" @click="delRange(index)"></a-button>
          </template>
          <a-button style="padding: 0px" type="link" icon="plus" @click="addRange"></a-button>
          <a-button type="link" @click="changeSelect">选择范围</a-button>
        </a-col>
        <a-col :span="1">
          <a-button type="primary" @click="handleSearch">查询</a-button>
        </a-col>
        <a-col :span="1">
          <a-button type="default" icon="export">导出</a-button>
        </a-col>
      </a-row>
    </div>
    <div style="margin-top: 30px;">
      <a-table
        :columns="columns"
        rowKey="id"
        :data-source="dataSource"
        :scroll="{ x: true }"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <a-space slot="efficiency" slot-scope="text, record">
          <span>{{ text * 100 }}</span>
        </a-space>
      </a-table>
    </div>
  </div>
</template>

<script>
import columnsItem from './assets/columnsItem.json'
import { getProcessDetails } from '@/api/customApi'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      querysTitle: '',
      querys: [],
      queryOptions: [
        {
          label: '品种',
          value: 'productType'
        },
        {
          label: '车台号',
          value: 'deviceNo'
        },
        {
          label: '效率(%)',
          value: 'efficiency'
        },
        {
          label: '当前实际产量(kg)',
          value: 'currentActualOutput'
        },
        {
          label: '当前理论产量(kg)',
          value: 'currentTheoryOutput'
        },
        {
          label: '整班理论产量(kg)',
          value: 'shiftTheoryOutput'
        },
        {
          label: '完成率',
          value: 'CompletionRate'
        },
        {
          label: '当前长度',
          value: 'length'
        },
        {
          label: '当前电流(安)',
          value: 'ia'
        },
        {
          label: '当班电耗(千瓦时)',
          value: 'shiftConsumption'
        },
        {
          label: '万米电耗（度/万米）',
          value: 'consumption10000'
        }
      ],
      deviceNoSingle: '',
      deviceOptions: [],
      deviceSelectType: true,
      deviceSelectRangeArr: [{ deviceNo1: 0, deviceNo2: 0 }],
      columns: [],
      queryParam: {
        deviceNo: ''
      },
      url: {
        list: '/ds_device_real_time_status/dsDeviceRealTimeStatus/processDetails'
      }
    }
  },
  created() {
    this.columnsItem = columnsItem
  },
  mounted() {},
  methods: {
    handleSearch() {
      this.columns = []
      this.querys.forEach(item => {
        this.columns.push({
          title: this.columnsItem[item].title,
          dataIndex: this.columnsItem[item].dataIndex,
          key: this.columnsItem[item].key,
          scopedSlots: { customRender: this.columnsItem[item].dataIndex }
        })
      })
      if (this.deviceSelectType) {
        let sortArr = this.deviceNoSingle.split(',').map(Number)
        sortArr.sort((a, b) => a - b)
        this.queryParam.deviceNo = sortArr.join(',')
      } else {
        let result = []
        // 遍历数组，提取连贯的数字
        this.deviceSelectRangeArr.forEach(obj => {
          for (let i = obj.deviceNo1; i <= obj.deviceNo2; i++) {
            result.push(i)
          }
        })
        // 去重并排序
        result = Array.from(new Set(result)).sort((a, b) => a - b)
        // // 转换为用逗号分隔的字符串
        this.queryParam.deviceNo = result.join(',')
        console.log('this.deviceSelectRangeArr', this.deviceSelectRangeArr)
        console.log('this.queryParam.deviceNo', this.queryParam.deviceNo)
      }
      if (this.queryParam.deviceNo == 0) {
        this.queryParam.deviceNo = ''
      }
      this.searchQuery()
    },
    //重新请求并切换参数(用于获取参数或机台)
    changeQuery() {
      if (this.queryParam.company && this.queryParam.workshop && this.queryParam.workingProcedure) {
        let query = {
          company: this.queryParam.company,
          workshop: this.queryParam.workshop,
          workingProcedure: this.queryParam.workingProcedure,
          pageSize: -1
        }
        getProcessDetails(query).then(res => {
          if (res.success) {
            this.deviceOptions = []
            res.result.records.forEach(item => {
              this.deviceOptions.push({
                label: item.deviceNo + '号机台',
                value: item.deviceNo
              })
            })
          } else {
            this.$message.warning(res.massage)
          }
        })
      } else {
        this.$message.warning('选择公司、车间、工序后显示机台')
      }
    },
    //deviceSelectType为true时是选择机台，为false时是机台范围
    changeSelect() {
      this.deviceSelectType = !this.deviceSelectType
    },
    addRange() {
      this.deviceSelectRangeArr.push({ deviceNo1: 0, deviceNo2: 0 })
    },
    delRange(i) {
      this.deviceSelectRangeArr.splice(i, 1)
    }
  }
}
</script>
<style></style>
